<script setup>
import {ref} from 'vue'
import { useRouter } from 'vue-router'
import ReimbursementApply from "@/components/ReimbursementApply.vue";
import {getReiManage} from "@/api/reimburse.js";
import dayjs from "dayjs";
import {formatDateFromArray, numberToStatus} from "../../utiles/typeConverter.js";

const reiApplyRef = ref()
const router = useRouter()

const getReimburses = async () =>{
  const {data} = await getReiManage(10001)
  console.log(data.data)
  // 清空之前的数组
  travelApplies.value = []
  currentApply.value = {}

  // 获取当前日期（使用dayjs）
  const today = dayjs()

  // 遍历数据
  data.data.forEach(item => {
    const start = dayjs(item.startTime)
    const end = dayjs(item.endTime)

    // 检查当前日期是否在startTime和endTime之间（包含边界）
    if (today.isAfter(start) && today.isBefore(end)) {
      // 如果今天在时间范围内，赋值给currentApply
      currentApply.value = item
    } else {
      // 否则添加到travelApplies数组
      travelApplies.value.push(item)
    }
  })

}

getReimburses()
// 模拟数据
const travelApplies= ref([
])


const currentApply = ref({
})


// 提交报销证明
const submitReimbursement = (id) => {
  console.log(id)
  router.push({
    name: 'ReimburseSubmit',
    query: {
      id: id
    }
  })
}

const reimbursementApply = (applyId,planId) =>{
  reiApplyRef.value.openDialog(applyId,planId,null)
}

</script>

<template>
  <div class="main">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>报销管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="container">

      <div v-if="currentApply.id">
        <div class="travel">
          <div class="apply">
            <div class="info-row">
              <div class="info-label">申请单号:</div>
              <div class="info-value">{{currentApply.applyId}}</div>
            </div>
            <div class="info-row">
              <div class="info-label">时间：</div>
              <div class="info-value">{{ formatDateFromArray(currentApply.startTime) }} — {{ formatDateFromArray(currentApply.endTime) }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">目的地：</div>
              <div class="info-value">{{ currentApply.destination }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">事由：</div>
              <div class="info-value">{{ currentApply.purpose }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">状态：</div>
              <div class="info-value">预支付款审核通过</div>
            </div>

            <div class="cur-message">
              您正在出差中，请及时提交费用凭证
            </div>
            <button class="btn btn-secondary" @click="submitReimbursement(currentApply.id)">
              管理报销申请
            </button>
          </div>
          <div class="plans">
            <div  class="trip-plans">
              <h3><i class="fas fa-route"></i> 行程计划</h3>

              <div
                v-for="plan in currentApply.plans"
                :key="plan.id"
                class="trip-plan-item"
              >
                <div class="plan-details">
                  <div class="plan-title">{{ plan.detail}}</div>
                  <div class="plan-desc">{{ plan.budgetDetail }}</div>
                </div>
                <button
                  class="btn btn-primary"
                  @click="reimbursementApply(currentApply.id,plan.id)"
                >
                  提交报销证明
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 遍历差旅申请 -->
      <div
        v-for="apply in travelApplies"
        :key="apply.id"
      >
        <div class="travel">
          <div class="apply">
            <div class="info-row">
              <div class="info-label">申请单号:</div>
              <div class="info-value">{{currentApply.applyId}}</div>
            </div>
            <div class="info-row">
              <div class="info-label">时间：</div>
              <div class="info-value">{{ formatDateFromArray(apply.startTime) }} — {{ formatDateFromArray(apply.endTime) }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">目的地：</div>
              <div class="info-value">{{ apply.destination }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">事由：</div>
              <div class="info-value">{{ apply.purpose }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">状态：</div>
              <div class="info-value">{{numberToStatus(apply.status)}}</div>
            </div>

            <div class="cur-message">
              <span v-if="apply.status===4">
                  请尽快提交报销申请
              </span>
              <span v-if="apply.status===5">
                  部分费用凭证不符合规定，请重新提交
              </span>
            </div>
            <button class="btn btn-secondary" @click="submitReimbursement(apply.id)">
              管理报销申请
            </button>
          </div>
          <div class="plans">
            <div  class="trip-plans">
              <h3> 行程计划</h3>

              <div
                v-for="plan in apply.plans"
                :key="plan.id"
                class="trip-plan-item"
              >
                <div class="plan-details">
                  <div class="plan-title">{{ plan.detail}}</div>
                  <div class="plan-desc">{{ plan.budgetDetail }}</div>
                </div>
                <button
                  class="btn btn-primary"
                  @click="reimbursementApply(apply.id,plan.id)"
                >
                  提交报销证明
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <ReimbursementApply ref="reiApplyRef" />
  </div>
</template>

<style scoped lang="scss">
.container {
  max-width: 1200px;
  margin: 12px auto;
  background: #ffffff;
  padding: 30px;
  border: 1px solid #dddcdc;
}


.cards-container {
  display: flex;
  flex-direction: column;
  gap: 25px;
}


.travel {
  min-height: 380px;
  border-radius: 8px;
  background: linear-gradient(to right, #e0e2f8, #e0e0f1, rgba(245, 245, 248, 0.74));
  margin-bottom: 40px;
  box-shadow: -5px 2px 1px 1px rgb(244, 244, 248);

  .apply {
    margin-top: 50px;
    margin-left: 30px;
    width: 400px;
    float: left;
  }

  .plans {
    display: inline-block;
    width: 400px;
    margin-top: 10px;

  }

  .cur-message{
    font-style: italic;
    color: #e74c3c;
    font-weight: 500;
    margin: 20px 0;
  }
}

.card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
  padding: 25px;
  transition: transform 0.3s, box-shadow 0.3s;
  border-left: 5px solid #4a6fa5;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.card-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: #2c3e50;
}

.card-status {
  padding: 6px 15px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  color: white;
}

.card-content {
  margin-bottom: 20px;
}

.info-row {
  display: flex;
  margin-bottom: 12px;
}

.info-label {
  width: 120px;
  font-weight: 600;
  color: #555;
}

.info-value {
  flex: 1;
  color: #333;
}

.trip-plans {
  margin-top: 20px;
  padding: 5px 20px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

.trip-plan-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #e9ecef;
}

.trip-plan-item:last-child {
  border-bottom: none;
}

.plan-details {
  flex: 1;
}

.plan-title {
  font-weight: 600;
  margin-bottom: 5px;
}

.plan-desc {
  font-size: 0.9rem;
  color: #666;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-primary {
  background-color: #4a6fa5;
  color: white;
}

.btn-primary:hover {
  background-color: #3a5a8c;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background-color: #5a6268;
}


</style>
